<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <link rel="stylesheet" href="__PLUGIN_PATH__/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="__PLUGIN_PATH__/layui/css/layui.css">
    <link rel="stylesheet" href="__STATIC_PATH__/css/style.css">
    <link rel="icon" href="__STATIC_PATH__/image/code.png">

</head>
<body class="body">

{block name='main'}
<div class="layui-layout">
    <blockquote class="layui-elem-quote layui-text">
        <span class="layui-btn refresh_charts" ><i class="fa fa-refresh"></i> 刷新图表</span>
        <span class="layui-btn now_month" >本月</span>
        <span class="layui-btn pre_month" >上月</span>
        <span class="layui-btn all_year" >本年</span>
        <div class="layui-inline">
            <label class="layui-form-label" >自定义时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="time_range_select" style="width: 200px;">
            </div>
        </div>

    </blockquote>

    <div id="one" style="width: 100%;height:400px;"></div>
    <hr/>
    <div id="two" style="width: 100%;height:400px;margin-bottom: 20px"></div>





<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<script type="text/javascript" src="__PLUGIN_PATH__/layui/layui.js"></script>
<script type="text/javascript" src="__PLUGIN_PATH__/lay-extend-module/config.js"></script>

<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="http://cdn.hcharts.cn/libs/highcharts-export-csv/export-csv.js"></script>
<script type="text/javascript">
    var days = [];var b = 1;for(var i = 0 ; i<31 ;i++){days[i] = parseInt(b)+'号';b++;}

    $(function(){
        $('.now_month').bind('click',function () {
            load_charts(getNowFormatDate());
            //load_charts(getNowFormatDate(),'secendCharts');
            $('#time_range_select').val('');
        });
        $('.pre_month').bind('click',function () {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() ;
            if (month >= 1 && month <= 9) { month = "0" + month;}
            var selectDate = year+'-'+month;
            load_charts(selectDate);
            //load_charts(selectDate,'secendCharts');
            $('#time_range_select').val('');
        });
        $('.all_year').bind('click',function () {
            var date = new Date();
            var year = date.getFullYear();
            var selectDate = year+'-01'+ ' ~ ' + year + '-12';
            load_charts(selectDate);
            //load_charts(selectDate,'secendCharts');
            $('#time_range_select').val('');
        });
        $('.refresh_charts').bind('click',function () {
            load_charts(getNowFormatDate());
            //load_charts(getNowFormatDate(),'secendCharts');
        })

        window.load_charts = function(selectDate ){
            selectDate = selectDate ? selectDate : getNowFormatDate();
            $.post("{:url('index/main')}",{selectDate:selectDate},function(msg){
               // p(msg);

                Highcharts.setOptions({
                    lang: {
                        thousandsSep:',',
                        printChart: '打印图表',
                        downloadJPEG: '下载 JPEG 文件',
                        downloadPDF: '下载 PDF   文件',
                        downloadPNG: '下载 PNG  文件',
                        downloadSVG: '下载 SVG  文件',
                        downloadCSV: '下载 CSV  文件',
                        downloadXLS: '下载 XLS   文件',
                        viewData: '数据预览'
                    },
                    navigation: {
                        menuItemStyle: {
                            padding: '6px 14px'
                        }
                    },
                    exporting: {
                        url: 'https://export.highcharts.com.cn'
                    },
                    credits: {
                        text: '',
                        url: ''
                    }
                });

                window['firstCharts'](msg);
                window['secendCharts'](msg);


            })
        };

        load_charts();

        window.firstCharts = function(msg){
            msg._in = objToArray(msg.in_money);
            msg._out = objToArray(msg.out_money);


            $('#one').highcharts( {
                exporting: {
                    filename: '数据',
                    csv: {
                        dateFormat: '%Y-%m-%d'
                    }
                },
                chart: {
                    type: 'line'
                },
                title: {
                    text: msg.title
                },
                tooltip:{
                    shared: true
                },
                subtitle: {
                    text: msg.subtitle
                },
                xAxis: {
                    crosshair: true,
                    categories: msg.days,
                    title: {
                        text: '日期',
                    }
                },
                yAxis: {
                    title: {
                        text: '单位 (元)'
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true          // 开启数据标签
                        },
                        enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    }
                },
                series: [
                    {
                        name: '收入',
                        data: msg._in,
                        color: '#fcff18',

                    },
                    {
                        name: '支出',
                        data: msg._out,
                        color: '#0094ff',

                    }

                ]
            });
        }
        window.secendCharts = function (msg){

            msg._in = objToArray(msg.in_come);

            $('#two').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: msg.title2
                },
                subtitle: {
                    text: msg.subtitle2
                },
                yAxis: {
                    title: {
                        text: '单位（元）K = 1000 ，M = 一百万'
                    }
                },
                xAxis: {
                    categories: msg.days
                },
                credits: {
                    enabled: true
                },
                plotOptions: {
                    column: {
                        dataLabels: {
                            enabled: false,
                            inside: true
                        }
                    }
                },
                series: [
                    {
                        name: '净收益',
                        data: msg._in,
                        color: '#fcff18'
                    },
                ]
            });
        }

    });



    layui.use(['laydate'],function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#time_range_select'
            ,range: '~'
            ,type: 'month'
            ,format: 'yyyy-MM'
            ,done: function(value, date, endDate){
                load_charts(value);
                load_charts(value,'secendCharts');
            }
        });
    });


    function objToArray(obj) {

        var arr = [];
        try {
            for(var i= 0 ; i < Object.keys(obj).length ;i++){
                arr.push(parseFloat(obj[i]))
            }
            return arr;
        }catch (e) {
            return arr;
        }



    }

    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        //var currentdate = year + seperator1 + month + seperator1 + strDate;
        var currentdate = year + seperator1 + month ;
        return currentdate;
    }

</script>

{:CMakerJs('all')}
</div>
{/block}

</body>
</html>